<template>
  <div class="user">
    <h3>用户列表</h3>
    <div class="toolbar">
      <el-form inline :model="searchForm" @submit.prevent.native size="small">
        <el-form-item>
          <el-input v-model="searchForm.username" placeholder="根据账号搜索" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.phone_number" placeholder="根据手机号搜索" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.sex" placeholder="请选择" style="width: 80px">
            <el-option :value="0" label="保密" />
            <el-option :value="1" label="男" />
            <el-option :value="2" label="女" />
            <el-option value="all" label="全部" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <xu-table :data="tableData" :pager="pager" :options="tableOptions" :loading="loading">
      <template slot="avatar" slot-scope="{ row }">
        <el-avatar :src="row.avatar" />
      </template>
      <template slot="sex" slot-scope="{ row }">
        <el-tag size="mini" type="info" v-if="row.sex == 0">保密</el-tag>
        <el-tag size="mini" type="warning" v-else-if="row.sex == 1">男</el-tag>
        <el-tag size="mini" type="primary" v-else-if="row.sex == 2">女</el-tag>
      </template>
      <template slot="is_vip" slot-scope="{ row }">
        <el-tag type="info" size="mini" v-if="row.is_vip === '0'">非会员</el-tag>
        <el-tag type="danger" size="mini" v-else-if="row.is_vip === '1'">会员</el-tag>
      </template>
    </xu-table>
    <xu-user-detail v-if="showUserDialog" v-model="showUserDialog" :uuid="uuid" />
  </div>
</template>

<script>
import { UserActionsEnum } from '../../../_/vue/store/user'
import XuUserDetail from '../../../components/xu-user-detail'
import { mapActions } from 'vuex'
export default {
  components: {
    XuUserDetail
  },
  data () {
    return {
      loading: false,
      uuid: '',
      showUserDialog: false,
      searchForm: {
        username: '',
        phone_number: '',
        sex: 'all'
      },
      pager: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        sizeChange: (val) => {
          this.currentPage = 1
          this.pageSize = val
          this.getData()
        },
        currentChange: (val) => {
          this.currentPage = val
          this.getData()
        }
      },
      tableData: [],
      tableOptions: [
        { attrs: { label: '序号', prop: 'id', type: 'index', align: 'center', width: '80px' } },
        { attrs: { label: '头像', prop: 'avatar' } },
        { attrs: { label: '账号', prop: 'username' } },
        { attrs: { label: '昵称', prop: 'nickname' } },
        { attrs: { label: '手机号', prop: 'phone_number' } },
        { attrs: { label: '性别', prop: 'sex', width: '80px', align: 'center' } },
        { attrs: { label: '是否VIP', prop: 'is_vip', width: '100px', align: 'center' } },
        { attrs: { label: '到期时间', prop: 'expire_time', width: '120px', align: 'center' } },
        // { attrs: { label: 'VIP类型', prop: 'vip_type' } },
        {
          attrs: { label: '操作', prop: 'button', align: 'center', width: '140px' },
          buttons: [
            {
              label: '信息',
              click: ({ row }) => {
                this.uuid = row.uuid
                this.showUserDialog = true
              },
              icon: 'el-icon-info'
            }
          ]
        }
      ]
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    ...mapActions({
      list: UserActionsEnum.LIST
    }),
    onSearch () {
      this.pager.currentPage = 1
      this.getData()
    },
    async getData () {
      this.loading = true
      const queryParams = { ...this.searchForm, limit: this.pager.pageSize, offset: (this.pager.currentPage - 1) * this.pager.pageSize }
      const result = await this.list(queryParams)
      this.tableData = result.data.list
      this.pager.total = result.data.total
      this.pager.currentPage = result.data.currentPage
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
